<template>
  <el-popover placement="bottom" width="250" trigger="click">
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
    >全选</el-checkbox>
    <div class="scorll-y">
      <el-checkbox-group class="filter_group mt-10" v-model="formThead" @change="handleChange">
        <el-checkbox
          v-for="(item,index) in  col"
          :label="item"
          :key="index"
          class="mb-5"
        >{{item.label}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button type="primary" icon="el-icon-s-unfold" size="mini" slot="reference"></el-button>
  </el-popover>
</template>

<script>
export default {
  props: ["col"],
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      formThead: []
    };
  },
  created() {
    this.formThead = this.col.slice(0, 6);
  },
  methods: {
    handleCheckAllChange(val) {
      this.formThead = val
        ? this.col.sort(function(a, b) {
            return a.index - b.index;
          })
        : [];
      this.isIndeterminate = false;
      this.$nextTick(() => {
        this.$parent.formCol = this.formThead;
        this.$emit("getCol", this.formThead);
      });
    },
    handleChange(val) {
      this.formThead = val.sort(function(a, b) {
        return a.index - b.index;
      });
      this.$nextTick(() => {
        this.$parent.formCol = this.formThead;
        this.$emit("getCol", this.formThead);
      });
    },
    setDefaultCol(col){
      this.formThead = col
    }
  }
};
</script>

<style lang='scss' scoped>
.filter_group {
  .el-checkbox {
    width: 80px;
  }
}
.scorll-y {
  max-height: 50vh;
  overflow: auto;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 0;
}
</style>
